<template>
  <div id="app">
    <TheNavbar />
    <main class="main-content">
      <transition 
        name="fade" 
        mode="out-in"
        @before-enter="beforeEnter"
        @enter="enter"
        @leave="leave"
      >
        <router-view :key="$route.fullPath" />
      </transition>
    </main>
  </div>
</template>

<script>
import TheNavbar from '@/components/TheNavbar.vue'
import { mapActions } from 'vuex'

export default {
  name: 'App',
  
  components: {
    TheNavbar
  },
  
  methods: {
    ...mapActions(['initTheme']),
    beforeEnter(el) {
      this.$gsap.set(el, {
        opacity: 0,
        y: 20
      })
    },
    enter(el, done) {
      this.$gsap.to(el, {
        duration: 0.6,
        opacity: 1,
        y: 0,
        ease: 'power2.out',
        onComplete: done
      })
    },
    leave(el, done) {
      this.$gsap.to(el, {
        duration: 0.6,
        opacity: 0,
        y: -20,
        ease: 'power2.in',
        onComplete: done
      })
    }
  },
  
  mounted() {
    this.initTheme()
  }
}
</script>

<style lang="scss">
@use '@/styles/global';

#app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow-x: hidden;
}

.main-content {
  flex: 1;
  margin-top: var(--header-height);
  position: relative;
  z-index: 1;
}
</style> 